<template>
    <div class="home">
        <div class="test-text" @click="randomColor">
            <span>测试文本 [{{ full_name }}]</span>
        </div>

        <div>
            <input type="text" v-model="form_data.input_name" />
            <input type="text" v-model="form_data.input_desc" />
            <button @click="submit">提交</button>
        </div>

        <div>
            <span>{{ small_count }}</span>
            <button @click="small_add">增加</button>
        </div>

        <span v-html="my_style"></span>
    </div>
</template>

<script lang="ts">
import _ from 'lodash';
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
    components: {
        HelloWorld,
    },
})
export default class Home extends Vue {
    css_index = 1
    small_count = "";

    form_data = {
        input_name: "",
        input_desc: ""
    };

    get my_style() {
        return `<link rel="stylesheet" type="text/css" href="styles/test-css-${this.css_index}.css" />`
    }

    get full_name() {
        return this.$storeTS.full;
    }

    async randomColor() {
        this.css_index = _.random(1, 3);
    }

    submit() {
        this.$storeTS.new_name = this.form_data.input_name;
        this.$storeTS.new_desc = this.form_data.input_desc;
    }

    async small_add() {
        let v = await this.$storeTS.Small.run();
        this.small_count = v;
    }
}
</script>
